import React, { Component } from 'react'

export default class App extends Component {

    state = {
        msg: '你好世界',
        count: 100
    }

    render() {
        return (
            <div>
                <h1>App - {this.state.msg} - {this.state.count} </h1>

                <button
                    onClick={() => {
                        console.log(this);

                        // this.setState({
                        //     msg: '锄禾日当午'
                        // }, () => {
                        //     // 会在组件数据更新之后执行的方法
                        //     console.log(document.querySelector('h1').innerText);
                        // })


                        // prevState 上一次的 state
                        // props 父组件传递过来的属性
                        this.setState((prevState, props) => {
                            console.log('666:', prevState, props);
                            return {
                                msg: '汗滴禾下土'
                            }
                        })


                        // this.state.count = 111
                        // 强制更新组件
                        // this.forceUpdate()

                        // 获取到的内容是落后一个级，因为 react 中使用的是虚拟 DOM ，所以我们获取
                        // 标签内容的时候拿到的是更新之前的值
                        // console.log(document.querySelector('h1').innerText);

                    }}>求点击</button>
            </div>
        )
    }
}
